<!--
 * @Author: jiu yin
 * @Date: 2024-04-09 18:15:55
 * @LastEditTime: 2024-04-26 16:53:38
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \web-smart-tour\src\pages\home\index.vue
 * jiu
-->
<template>
	<view class="home-content">
		<view :style="{ height: statusBarHeight + 'px', position: 'absolute' }">
			<u-navbar :safeAreaInsetTop="true" :bgColor="navBg">
				<view slot="left"></view>
				<view :class="[isWhite ? 'text-black' : 'text-white', 'text-bold']" slot="center">云梦智慧游</view>
			</u-navbar>
		</view>

		<view class="home-swiper">
			<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="5000" :duration="300" @change="handleSwiper">
				<swiper-item v-for="(item, index) in banList" :key="index">
					<image @click="handleBanner(item, index)" class="swiper-img" :src="ossurl(item.image)" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="dots">
				<block v-for="(item, index) in banList" :key="index">
					<view class="dot-item" :class="curBanner == index ? 'active' : ''"></view>
				</block>
			</view>
		</view>
		<view class="scenic-box">
			<view class="scenic-top-box">
				<image class="scenic-bg" src="../../static/images/home_bg.jpg" />

				<view class="scenic-top">
					<view v-if="hotList.length > 0">
						<view class="scenic-title" >
							近期热门
							<image class="scenic-star" src="../../static/images/avatar_up.png" />
						</view>
						<view class="scenic-hot">
							<scroll-view class="hot-swiper" scroll-x enable-flex style="flex-direction: row">
								<view
									class="hot-swiper-item"
									v-for="(item, index) in hotList"
									:key="index"
									@click="navigateTo(`/pagesA/scenic_detail/index?id=${item.spot_id}`)"
								>
									<!-- <image class="hot-img" :src="item.image" mode=""></image> -->
									<image class="hot-img" :src="ossurl(item.face)" mode=""></image>
									<view class="hot-title">{{ item.title }}</view>
								</view>
							</scroll-view>
						</view>
					</view>

					<view class="scenic-title">
						全部景点
						<image class="scenic-star" src="../../static/images/avatar_up.png" />
					</view>
				</view>
			</view>

			<view class="scenic-list">
				<!-- <scroll-view class="scenic-list" style="flex: 1;" enableBackToTop="true" scroll-y @scrolltolower="loadMore()"> -->
				<scenic_item v-for="(item, index) in scenicList" :key="index" :datas="item"></scenic_item>
			</view>
		</view>
	</view>
</template>

<script>
	import { navigateTo, navigateBack } from '@/hooks';
	import { spotPointsHot, spotPointsList, bannerList, fileDeploy } from '@/api/home.js';
	import scenic_item from '@/components/scenic_item';
	import custom_navbar from '@/components/custom_navbar/index.vue';
	import store from '@/store';
	import { ossurl } from '@/utils/index';

	export default {
		name: 'home',
		components: {
			scenic_item,
			custom_navbar,
		},
		data() {
			return {
				title: 'Hello',
				navigateTo,
				banList: [],
				hotList: [],
				scenicList: [],
				curPage: 0,
				curBanner: 0,
				total: 0,
				rec_url: '',
				isLoad: false,
				isWhite: false,
				navBg: 'transparent',
				statusBarHeight: 0,
			};
		},
		computed: {
			recUrl() {
				return this.$store.getters.rec_url;
			},
		},
		created() {
			this.getRecUrl();
			this.getBannerList();
			this.getHotList();
			this.getScenicList();
		},
		onShow() {
			this.toTop();
		},
		mounted() {
			let that = this;
			const info = uni.getSystemInfoSync();
			that.statusBarHeight = info.statusBarHeight + 44;
		},
		onReachBottom() {
			this.loadMore();
		},
		onPageScroll(e) {
			let opacity = 0;
			if (e.scrollTop > 100) {
				this.isWhite = true;
				opacity = (e.scrollTop - 100) / 30;
				this.navBg = `rgba(255, 255, 255, ${opacity})`;
			} else {
				this.isWhite = false;
				this.navBg = 'rgba(255, 255, 255, 0)';
			}
		},
		async onPullDownRefresh() {
			// 下拉刷新
			this.curPage = 0;
			this.getBannerList();
			this.getHotList();
			this.getScenicList();
			// 停止下拉刷新
			uni.stopPullDownRefresh();
		},
		methods: {
			ossurl,
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					// duration: 300
				});
			},
			getRecUrl() {
				fileDeploy().then((res) => {
					if (res.code == 200) {
						store.commit('userInfo/set_rec_url', res.data.public_url);
						store.commit('userInfo/set_fileDeploy', res.data);
						let shareInfo = res.data?.site_info?.share_info || {};
						store.commit('share/shareInfo', shareInfo);

						console.log(res.data, '公共文件配置');
						this.rec_url = res.data.public_url;
					}
				});
			},
			getBannerList() {
				bannerList().then((res) => {
					if (res.code == 200) {
						this.banList = res.data;
					}
				});
			},
			getHotList() {
				spotPointsHot().then((res) => {
					if (res.code == 200) {
						this.hotList = res.data;
					}
				});
			},
			getScenicList() {
				let params = {
					page: this.curPage + 1,
					limit: 10,
					// lng: '104.051225',
					// lat: '30.616353',
				};
				spotPointsList(params).then((res) => {
					if (res.code == 200) {
						let dataArr = [...this.scenicList];
						if (params.page > 1) {
							dataArr.push(...res.data);
						} else {
							dataArr = res.data;
						}
						this.scenicList = dataArr;
						this.curPage = params.page;
						this.total = res.data.total;
					}
				});
			},
			loadMore() {
				let isLoad = Math.ceil(this.total / 10) > this.curPage;
				if (isLoad) {
					this.getScenicList();
				}
			},
			handleSwiper(e) {
				this.curBanner = e.target.current;
			},
			handleBanner(val, index) {
				if (val.type == 1) {
					navigateTo(`/pagesA/scenic_detail/index?id=${val.path_id}`);
				}
				if (val.type == 3) {
					navigateTo(`/pagesA/scenic_punch/index?id=${val.path_id}`);
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.home-content {
		position: relative;
		.home-swiper {
			width: 100%;
			height: 670rpx;
			position: relative;
			.swiper {
				width: 100%;
				height: 670rpx;
				.swiper-img {
					width: 100%;
					height: 670rpx;
				}
			}
			.dots {
				width: 100%;
				height: 60rpx;
				display: flex;
				justify-content: center;
				position: absolute;
				bottom: 16rpx;

				.dot-item {
					width: 12rpx;
					height: 6rpx;
					margin-right: 4rpx;
					border-radius: 8rpx;
					background-color: #a3aeb1;
				}

				.active {
					width: 56rpx;
					background-color: #fff;
				}
			}
		}
		.scenic-box {
			position: absolute;
			left: 0;
			top: 640rpx;
			width: 100%;
			height: calc(100vh - 640rpx);
			background: #f6f9f8;
			border-radius: 32rpx 32rpx 0 0;

			.scenic-top-box {
				position: relative;
				.scenic-bg {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 404rpx;
					border-radius: 32rpx 32rpx 0 0;
				}

				.scenic-top {
					padding: 38rpx 24rpx 0rpx;
					height: 366rpx;

					.scenic-title {
						position: relative;
						font-weight: 700;
						font-size: 32rpx;
						color: #3d3d3d;

						.scenic-star {
							position: absolute;
							left: 130rpx;
							width: 34rpx;
							height: 26rpx;
						}
					}

					.scenic-hot {
						height: 206rpx;
						margin: 16px 0rpx;
						.hot-swiper {
							height: 206rpx;
							display: flex;
							white-space: nowrap;

							.hot-swiper-item {
								width: 192rpx;
								height: 182rpx;
								padding: 12rpx;
								margin-right: 16rpx;
								text-align: center;
								background-color: #fff;
								border-radius: 12rpx;
								font-weight: 400;
								font-size: 26rpx;
								color: #3d3d3d;
							}
							.hot-img {
								width: 192rpx;
								height: 126rpx;
								border-radius: 12rpx;
							}
							.hot-title {
								margin-top: 8rpx;
							}
						}
					}
				}
			}
		}
		.scenic-list {
			padding: 0 24rpx 40rpx;
			background: #f6f9f8;
		}
	}
</style>
